<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="demo">
			<!-- v-if指令添加到单个元素 -->
			<div v-if="type=='a'">a</div>
			<div v-else-if="type=='b'">b</div>
			<div v-else>other</div>
			
			<!-- template可以批量切换多个元素，结果中不包含template元素节点 -->
			<template v-if="ok">
				<h1>Title</h1>
				<p>Paragraph 1</p>
			</template>
			
			<!-- 默认会复用控件，如果不想复用，设置key -->
			<template v-if="loginType === 'username'">
				<label>Username</label>
				<input placeholder="Enter your username" key="username-input">
			</template>
			<template v-else>
				<label>Email</label>
				<input placeholder="Enter your email address" key="email-input">
			</template>
			
			<!-- v-show只切换元素的display属性 -->
			<h1 v-show="ok">Hello v-show!</h1>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#demo",
				data: {
					type: 'c',
					ok: true,
					loginType: 'username'
				}
			})
		</script>

	</body>
</html>
